/**
 * Created by yoyoyk on 2017/7/14.
 */
import React from 'react';

export default function View_describe (props){

    const prop = Object.assign({},props);

    const data = prop.data || [{name:"未达到计划平均产量",color:"red"},
        {name:"达到或超过计划平均产量",color:"green"},
        {name:"延期完成",color:"red"},
        {name:"预计提前完成",color:"green"},
        {name:"预计延期完成",color:"orange"},
        {name:"提前完成",color:"blue"}
    ];

    function inlineText(name){
        switch(name){
            case "延期完成" : return "延期";
            case "预计提前完成" : return "前";
            case "预计延期完成" : return "后";
            case "提前完成" : return "提前";
        }
    }

    return (<div className="chart-view-describe">
            <span data-type="title"> 图例说明 </span>
            <ul className="chart-view-describe-list">
                {
                    data.map((i,_i)=> <li>
                            <span data-color={i.color} >
                                {inlineText(i.name)}
                            </span>
                            { i.name }
                        </li>
                    )
                }
            </ul>
        </div>
    )
}